<template>
  <div>
    <div class="type-header" v-if="typeInfo">
      <el-card shadow="hover">
        <div class="type-box">
          <div class="type-image-box" v-if="typeInfo.image_to">
            <img :src="typeInfo.image_to.http_url" />
          </div>
          <div class="type-info">
            <div class="type-name">{{ typeInfo.name }}</div>
            <div class="type-description">{{ typeInfo.seo_description }}</div>
          </div>
        </div>
      </el-card>
    </div>

    <el-card shadow="hover">
      <template #header>
        <div class="list-title">{{ title }}</div>
      </template>
      <List1 :list="list" :total="total" :currentPage="page" @change="changeList"></List1>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import { articleList } from '@/api/articleList';
const route = useRoute();
const router = useRouter();
const articleType = useArticleType();
const identification: any = route.params.identification;
const typeIndexArr = identification.replace('.html', '').split('-');
let title = '';
let article_type_id = '';
let typeInfo: any = null;
if (articleType.value[typeIndexArr[0]].name) {
  title = articleType.value[typeIndexArr[0]].name;
  article_type_id = articleType.value[typeIndexArr[0]].id;
  typeInfo = articleType.value[typeIndexArr[0]];
}
if (typeIndexArr[1] && articleType.value[typeIndexArr[0]].children[typeIndexArr[1]].name) {
  title += '-' + articleType.value[typeIndexArr[0]].children[typeIndexArr[1]].name;
  article_type_id = articleType.value[typeIndexArr[0]].children[typeIndexArr[1]].id;
  typeInfo = articleType.value[typeIndexArr[0]].children[typeIndexArr[1]];
}
let list: any = [];
let total: number = 0;
let page: number = 1;
if (route.query.page) {
  page = Number(route.query.page);
}
const listRes = await articleList({ page: page, article_type_id: article_type_id });
if (listRes.status === 20000) {
  list = listRes.data.list;
  total = listRes.data.total;
}
const changeList = async (val: number) => {
  page = val;
  list = [];
  router.push({
    path: '/articleType/' + identification,
    query: {
      page: val,
    },
  });
  const listRes = await articleList({ page: page, article_type_id: article_type_id });
  if (listRes.status === 20000) {
    list = listRes.data.list;
    total = listRes.data.total;
  }
};
// definePageMeta({
//   layout: false,
// });
</script>
<style lang="less" scoped>
@import './index.less';
</style>
